﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>创建活动</title>
    <link href="~/kj/layui/css/layui.css" rel="stylesheet" />
</head>
<body style="margin-top: 3%;margin-left: 10%">
    <form class="layui-form" action="CreateActive" method="post">
        <div style="width: 600px;">
            <h1>创建活动</h1><br/>
            <div class="layui-form-item">
                <label class="layui-form-label">活动名称</label>
                <div class="layui-col-md7">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">活动简介</label>
                <div class="layui-col-md7">
                    <textarea name="Info" id="Info" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-col-md7">
                    <input type="text" class="layui-input" name="stime" id="stime"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-col-md7">
                    <input type="text" class="layui-input" name="etime" id="etime"/>
                </div>
            </div>
        </div>

        <button type="button" id="addUser" class="layui-btn">
            <i class="layui-icon">&#xe608;</i> 添加选手
        </button>
        <br/>
        <div class="layui-col-md4">
            <table id="CamTable" class="layui-table" lay-filter="CamTable">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>简介</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>

        <div class="layui-form-item layui-col-md4 layui-col-md-offset1">
            <div class="layui-input-line">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

<script src="~/kj/layui/layui.js"></script>

<script>

    function delUser(s) {
        var t = s.parentNode.parentNode;
        //console.log(t);
        t.remove();
    }

    layui.use(['form', 'laydate', 'layer', 'jquery', 'table'],
        function() {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var $ = layui.jquery;
            var table = layui.table;

            form.render();
            $("#addUser").click(function() {
                layer.open({
                    type: 1,
                    title: '添加选手',
                    area: ['400px', '500px'],
                    resize: false,
                    anim: 1,
                    btnAlign: 'c',
                    btn: ['添加', '取消'],
                    btn1: function(index, layero) {
                        cname = $('[name=Cname]').val();
                        cage = $('[name=Age]').val();
                        csex = $('input[name=sex]:checked').val();
                        cinfo = $('[name=CamInfo]').val();
                        if (cage>90 || cage<0) {
                            layer.msg('年龄不合法，请重新输入。');
                            return false;
                        }
                        var tr = '<tr><td>' +
                            cname +
                            '</td><td>' +
                            cage +
                            '</td><td>' +
                            csex +
                            '</td><td>' +
                            cinfo +
                            '</td>' +
                            '<td class="selected"><button type="button" onclick="delUser(this);" id="removeUser" class="layui-btn layui-btn-sm layui-col-md-offset5"><i class="layui-icon">&#xe640;</i></button></td></tr>';
                        $('#tbody').append(tr);
                        layer.msg("添加成功！");
                        layer.close(index);
                        return true;
                    },
                    btn2: function() {
                        layer.close();
                    },
                    skin: 'layui-layer-molv',
                    content:
                        '<div class="layui-form-item"><h1>添加选手</h1><br/><label class="layui-form-label">选手姓名</label><div class="layui-inline"><input type="text" class="layui-input" name="Cname" /></div></div><div class="layui-form-item  "><label class="layui-form-label">年龄</label><div class="layui-input-inline layui-col-md4"><input type="text" class="layui-input" name="Age"/></div></div><div class="layui-form"><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-inline"><input type="radio" name="sex" value="男" title="男" checked><input type="radio" name="sex" value="女" title="女"></div></div></div><div class="layui-form-item"><label class="layui-form-label">选手简介</label><div class="layui-input-inline layui-col-md4"><textarea name="CamInfo" placeholder="请输入内容" class="layui-textarea"></textarea></div></div>',
                    success: function() {
                        form.render();
                    }
                });
            });

            laydate.render({
                elem: '#stime' //指定元素
            });

            laydate.render({
                elem: '#etime' //指定元素
            });

            //监听提交
            form.on('submit(formDemo)',
                function(data) {
                    count = 0;
                    if ($('[name=stime]').val()> $('[name=etime]').val()) {
                        layer.msg("开始时间不能晚于结束时间！");
                        return false;
                    }
                    
                    data1 = {
                        "Title": $('[name=title]').val(),
                        "Info": $('[name=Info]').val(),
                        "Sttime": $('[name=stime]').val(),
                        "Edtime": $('[name=etime]').val(),
                        "List": []
                    };

                    var tbody = $('#tbody').find('tr').each(function() {
                        var tdc = $(this).find('td');
                        var Name = $(this).find('td')[0].innerText;
                        var Age = $(this).find('td')[1].innerText;
                        var Sex = $(this).find('td')[2].innerText;
                        var Info = $(this).find('td')[3].innerText;

                        data1['List'][count] = {
                            "Name": Name,
                            "Age": Age,
                            "Sex": Sex,
                            "Info": Info
                        };
                        count = count + 1;
                    });
                   
                    $.ajax({
                        type: 'Post',
                        url: '/Active/SaveActive',

                        data: data1,
                        success: function(msg) {
                            layer.msg(msg);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        },
                        error: function() {
                            layer.msg("提交失败!");
                        }
                    });
                });

        });
</script>
</body>
</html>
